<template>
  <div class="todo-footer">
        <label>
          <input type="checkbox" :checked="isAll" />
        </label>
        <span>
           <span>已完成 {{doneTotal}}</span> / 全部 {{total}}
        </span>
        <button class="btn btn-danger">清除已完成任务</button>
  </div>
</template>

<script>
export default {
    name:'TodoFooter',
    props:['todos'],
    computed:{
      total(){
        return this.todos.length
      },
      doneTotal(){
        // 第一种方法：最简单的方法，通过遍历得到每一个 todo ，得到每一个完成的 todo
        // let i = 0;
        // this.todos.forEach((todo) => {
        //     if(todo.done) i++
        // });
        // return i
        // 第二种方法，使用 reduce 下面为简写方式
        return this.todos.reduce((pre,current)=> pre + (current.done ? 1 : 0),0)
      },
      isAll(){
        return this.doneTotal === this.total
      }
    }
}
</script>

<style scoped>
 /*footer*/
    
 .todo-footer {
      height: 40px;
      line-height: 40px;
      padding-left: 6px;
      margin-top: 5px;
  }
  
  .todo-footer label {
      display: inline-block;
      margin-right: 20px;
      cursor: pointer;
  }
  
  .todo-footer label input {
      position: relative;
      top: -1px;
      vertical-align: middle;
      margin-right: 5px;
  }
  
  .todo-footer button {
      float: right;
      margin-top: 5px;
  }
</style>